<template>
    <div class="goods-container">
        <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
            <img src="../../images/shuijiao.jpg" alt="">
            <h3>{{ item.title }}</h3>
            <div class="goods-info">
                <p class="goods-price">
                    <span class="new">￥{{ item.sell_price }}</span>
                    <span class="old">￥{{ item.market_price }}</span>
                </p>
                <p class="goods-body">
                    <span>热卖中</span>
                    <span>剩{{ item.stock_quantity }}件</span>
                </p>
            </div>
        </div>


        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                pageIndex: 1,
                goodsList: []
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList() {
                this.$http.get('home/GoodsList.json?pageIndex=' + this.pageIndex).then( result => {
                    if (result.body.status === 0) {
                        this.goodsList = result.body.message;
                    }
                });
            },
            getMore() {
                this.pageIndex ++;
                this.getGoodsList();
            },
            goDetail(id) {
                // 编程式导航
                // 方式1
                // this.$router.push('goodsinfo/' + id);
                // 方式2
                // this.$router.push({ path: 'goodsinfo/' + id });
                // 方式3: name：路由名称
                this.$router.push({ name: 'goodsinfo', params:{ id }});
                // 方式4：with query, resulting in /register?plan=private
                // this.$router.push({ path: 'register', query: { plan: 'private' }})
            }

        }
    }
</script>

<style lang="scss" scoped>
.goods-container {
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;

    .goods-item {
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px, #ccc;
        margin: 4px 0;
        padding: 2px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        min-height: 200px;
        img {
            width: 100%;
        }
        h3 {
            font-size: 14px;
        }

        .goods-info {
            background-color: #eeeeee;
            margin: 2px;
            .goods-price {
                padding-top: 3px;
                padding-left: 2px;
                .new {
                    font-size: 15px;
                    color: red;
                    font-weight: bold;
                }
                .old {
                    font-size: 12px;
                    text-decoration: line-through;
                    margin-left: 10px;
                }
            }
            .goods-body {
                display: flex;
                justify-content: space-between;
                padding: 0 2px;
                font-size: 12px;
            }
        }

    }
}
</style>
